<div style="width: 100%;">
<div id="one-modal" class="modal fade" tabindex="-1" role="dialog">
  <div  class="modal-dialog" role="document">
    <div [class]="'modal-content one-dialog-'+ dialog?.type">
      <div class="modal-header">
        <button type="button" class="close" (click)="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{dialog?.title}}</h4>
      </div>
      <div class="modal-body">
        {{dialog?.content}}
      </div>
      <div class="modal-footer">
        <button *ngIf="dialog?.showCancelBtn" type="button" class="btn btn-default" (click)="cancel()">{{dialog?.cancelBtn}}</button>
        <button *ngIf="dialog?.showOkBtn" type="button" [class]="'btn btn-'+dialog?.type" (click)="save()">{{dialog?.okBtn}}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="one-dialog" [class]="'one-dialog dialog dialog-solid dialog-'+  dialog?.type">
  <div class="dialog-header with-border">
    <h3 class="dialog-title">{{dialog?.title}}</h3>
    <div class="dialog-tools pull-right">
      <button class="btn btn-dialog-tool" data-widget="remove" (click)="close()"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="dialog-body">
    {{dialog?.content}}
  </div><!-- /.box-body -->
  <div class="dialog-footer">
    <button *ngIf="dialog?.showCancelBtn" type="button" class="btn btn-default" (click)="cancel()">{{dialog?.cancelBtn}}</button>
    <button *ngIf="dialog?.showOkBtn" type="button" [class]="'btn btn-'+dialog?.type" (click)="save()">{{dialog?.okBtn}}</button>
  </div><!-- box-footer -->
</div><!-- /.box -->
</div>
